<template>
	<view class="uni-relative" :style="skin">
		<jnavbar :title="'地址详情'"></jnavbar>
		<view class="page_container">
			<view class="uni-block-form">
				<u-form class="" label-width="160rpx" :model="form" ref="uForm">
					<u-form-item label="姓名"><u-input placeholder="请输入收件人姓名" v-model="form.name" /></u-form-item>
					<u-form-item label="手机号"><u-input placeholder="请输入收件人电话" v-model="form.phone" /></u-form-item>
					<u-form-item label="选择省市">
						<view style="width: 100%;" @click="show = true">
							<text>{{ form.pickerText }}</text>
						</view>
						<!-- <u-input @click="show = true" v-model="form.pickerText" disabled /> -->
					</u-form-item>
					<u-form-item label="详细地址"><u-input placeholder="请输入详细地址" v-model="form.address" /></u-form-item>
					<u-form-item label="默认地址"><u-switch size="40" slot="right" v-model="form.isDefault"></u-switch></u-form-item>
				</u-form>
			</view>

			<!-- #ifdef MP-WEIXIN -->
			<view class="uni-block-wx uni-background-gray"><text class="sm-font" @click="getWxAddress">使用微信收货地址</text></view>
			<!-- #endif -->
			<view class="uni-block-button uni-center">
				<u-button  :custom-style="customStyle" type="primary" @click="submit">{{ buttonText }}</u-button>
			</view>
		</view>
		<u-picker mode="region" v-model="show" @confirm="onConfirm"></u-picker>
	</view>
</template>

<script>
import http from '@/common/http.js';

export default {
	onShareAppMessage() {
		return this.wxShare();
	},
	data() {
		return {
			form: {
				name: '',
				phone: '',
				pickerText: '请选择省市区',
				address: '',
				isDefault: false
			},
			show: false,
			cityPickerValueDefault: [0, 0, 0],
			themeColor: '#007AFF',
			buttonText: '提交新增',
			customStyle:{
				"background": "var(--main-color)",
				"box-shadow": "-2px 5px 9px 0px var(--content-color)",
				"border-radius": "49rpx",
				"color": "#FFFFFF",
				"font-size":"34rpx",
				"height":"97rpx",
				"margin":"0 40rpx"
			}
		};
	},
	computed: {
		skin() {
			return this.$store.state.skin;
		}
	},
	async onLoad(params) {
		await this.$getWxs
		uni.showLoading({
			title: '加载中',
			mask: true
		});
		if (params.id) {
			const pages = getCurrentPages();
			const prevPage = pages[pages.length - 2];
			// #ifdef MP-WEIXIN
			let details = prevPage.data.list.filter(a => {
				return a.id == params.id;
			});
			// #endif
			// #ifndef MP-WEIXIN
			let details = prevPage.list.filter(a => {
				return a.id == params.id;
			});
			// #endif
			let detail = details[0];
			let _this = this;
			_this.id = detail.id;
			_this.form.name = detail.consignee;
			_this.form.phone = detail.iphone;
			let address = detail.address.split(',');

			_this.form.pickerText = address[0] + '-' + address[1] + '-' + address[2];
			_this.form.address = address[3];
			_this.form.isDefault = detail.type == 2 ? true : false;
			uni.hideLoading();
			// this.getAddressDetail(params.id);
			this.buttonText = '提交修改';
		} else {
			uni.hideLoading();
		}
	},

	methods: {
		submit() {
			uni.showLoading({
				title: '正在保存...',
				mask: true
			});
			var provice = this.form.pickerText.split('-')[0],
				city = this.form.pickerText.split('-')[1],
				county = this.form.pickerText.split('-')[2];
			const params = {
				// id: this.id || 0,
				consignee: this.form.name,
				iphone: this.form.phone,
				type: this.form.isDefault ? 2 : 1,
				address: provice + ',' + city + ',' + county + ',' + this.form.address

				// province: provice,
				// city: city,
				// county: county,
				// address: this.address,
			};
			if (this.id) {
				params.id = this.id;
			}

			if (params.consignee == '') {
				uni.showToast({
					title: '姓名不能为空',
					icon: 'none'
				});
			} else if (params.iphone == '') {
				uni.showToast({
					title: '手机号不能为空',
					icon: 'none'
				});
			} else if (!this.$u.test.mobile(params.iphone)) {
				uni.showToast({
					title: '请填写正确的号码',
					icon: 'none'
				});
			} else if (this.form.pickerText == '请选择省市区') {
				uni.showToast({
					title: '省市区不能为空',
					icon: 'none'
				});
			} else if (params.address == '') {
				uni.showToast({
					title: '详细地址不能为空',
					icon: 'none'
				});
			} else {
				if (params.id) {
					var method = 'PUT';
					var url = '/order/saveUserAddress';
				} else {
					var method = 'POST';
					var url = '/order/addUserAddress';
				}
				// 请求接口
				http(url, params, method).then(
					res => {
						uni.hideLoading();
						uni.navigateBack({
							delta: 1
						});
					},
					e => {
						uni.showModal({
							title: '提示',
							content: e,
							showCancel: false
						});
						uni.hideLoading();
					}
				);
			}
		},
		getWxAddress() {
			const _this = this;
			uni.chooseAddress({
				success(res) {
					_this.form.name = res.userName;
					_this.form.phone = res.telNumber;
					_this.form.pickerText = res.provinceName + '-' + res.cityName + '-' + res.countyName;
					_this.form.address = res.detailInfo;
				}
			});
		},
		onCancel(e) {},
	
		onConfirm(e) {
			this.form.pickerText = e.province.label + '-' + e.city.label + '-' + e.area.label;
		},
		changeDefault(e) {
			this.isDefault = !this.isDefault;
		}
	},
	onBackPress() {
		// if (this.$refs.mpvueCityPicker.showPicker) {
		// 	this.$refs.mpvueCityPicker.pickerCancel();
		// 	return true;
		// }
	},
	onUnload() {}
};
</script>

<style lang="scss">
.uni-relative {
	height: 100vh;
	// padding-top: 20rpx;
}

.uni-block-form {
	width: 750rpx;
	border-radius: 12rpx;
	// margin-left: 32rpx;
	background: #fff;
	padding: 0 36rpx;
	.item {
		padding: 20rpx 0;
		height: 60rpx;
		line-height: 60rpx;
		box-sizing: content-box;
		font-size: 30rpx;
		.label {
			width: 180rpx;
		}

		.input-text {
			width: 75%;
			height: 100%;
		}
		.uni-input-text {
			border: none;
		}
	}
}

.uni-block-wx {
	padding: 20rpx 36rpx;
	text-align: right;

	text {
		color: #3c8dbc;
		text-decoration: underline;
	}
}

.uni-block-button {
	position: absolute;
	width: 100%;
	bottom: 27rpx;
	left: 0;
	.btns {
		width: 673rpx;
		height: 97rpx;
		background: #ff4f13;
		box-shadow: -2px 5px 9px 0px rgba(255, 79, 19, 0.5);
		border-radius: 49rpx;
		color: #ffffff;
		font-size: 34rpx;
		// margin-top: 27rpx
	}
	// 	.uni-button {
	// 		margin-top: 10rpx;
	// 	}
}
.pclass {
	color: #666;
	font-size: 32rpx;
}

</style>
